<template>
  <div>
    <!-- 顶部背景 -->
    <NavHeader />
    <!-- 中间菜单 -->
    <NavMain
      ref="NavMainRef"
      :navs="navs"
      :style="{ background: isFixed ? 'var(--datav-body-bg)' : '' }"
      @change="handleNavChange"
    />
    <div class="nav-shadow"></div>
    <div class="datav-main">
      <div class="datav-content">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  import NavHeader from './src/NavHeader.vue';
  import NavMain from './src/NavMain.vue';
  const router = useRouter();
  const NavMainRef = ref();
  const isFixed = ref(false);
  const navs = ref([
    { id: 0, key: 'MyProject', name: '我的可视化' },
    // { id: 1, key: 'MyData', name: '我的数据' },
    // { id: 2, key: 'MyCom', name: '我的组件' },
    // { id: 3, key: 'MyCase', name: '教程' },
  ]);
  /**
   * 顶部固定
   */
  const scroll = () => {
    isFixed.value = NavMainRef.value.$el.offsetTop > 200;
  };
  /**
   * nav 切换
   */
  const handleNavChange = (nav: any) => {
    router.push({ name: nav.key });
  };
  onMounted(() => {
    // 监听滚动
    window.addEventListener('scroll', scroll);
  });

  onUnmounted(() => {
    // 移除监听事件
    window.removeEventListener('scroll', scroll);
  });
</script>
<style lang="less">
  body {
    background: var(--datav-body-bg) !important;
  }

  .nav-shadow {
    background: linear-gradient(180deg, transparent, var(--datav-body-bg));
    height: 50px;
    position: relative;
    width: 100%;
    z-index: 1;

    .datav-main {
      user-select: none;

      .datav-content {
        position: relative;
        color: var(--datav-body-bg);
      }
    }
  }
</style>
